<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>像素颜色</title>
    <style>
        /*写了100px,截图时会发现125px或者200px,因为操作系统里面文本往往进行了放大（windows可能会调整为125%，4k屏会跳200%）,这会让所有设置的px扩大*/
        #test {
            width: 100px;
            height: 100px;
            /*r红g绿b蓝 ,光的三源色,范围0-255,0就不发光黑了,255最大*/
            background-color: rgb(255,0,0);
        }
        /*颜色名表达太单一，开发中我们通常不用，只在测试时使用*/

        #test2 {
            width: 100px;
            height: 100px;
            /*r红g绿b蓝 ,光的三源色,范围0-255,0就不发光黑了,255最大,也可以用百分比表示,100%就是255,要么3个都百分比要么都数字 */
            background-color: rgb(0,255,0);
        }
        #test3 {
            width: 100px;
            height: 100px;
            background-color: rgb(0,0,255);
        }
        #test4 {
            width: 100px;
            height: 100px;
            /*紫罗兰色*/
            background-color: rgb(138,43,226);
        }
        /*rgba多一位，最后一位控制透明度范围[0,1]，0表示透明(看不见了),1不透明，0.5半透明,用百分比也行，前三个必须一致，最后一个百分比小数任意*/
        #test5 {
            width: 100px;
            height: 100px;
            /*0.5表示半透明*/
            background-color: rgba(255,0,0,0.5);
        }
        /*都255就是白色,都一样就是灰色,且数值越大越淡*/
        #test6 {
            width: 100px;
            height: 100px;
            /*0.5表示半透明*/
            background-color: rgba(120,120,120,1);
        }
        /*看到颜色后不会调得用取色器*/
        #test6 {
            width: 100px;
            height: 100px;
            /*0.5表示半透明*/
            background-color: rgba(254,36,102,1);
        }
    </style>
</head>
<body>
<div class="container">
    <div id="test">
    </div>
    <div id="test2">
    </div>
    <div id="test3">
    </div>
    <div id="test4">
    </div>
    <div id="test5">
    </div>
    <div id="test6">
    </div>
</div>
</body>
</html>